<template>
  <a-modal
    v-model="visible"
    title="详情"
    width="850px"
    :footer="null"
  >
    <a-spin :spinning="loading">
      <a-row
        :gutter="24"
        type="flex"
        justify="space-between"
      >
        <a-col
          :span="16"
          class="bd"
        >
          <p class="title">基本信息</p>
          <div>
            <a-row class="row">
              <a-col :span="12">
                姓名：{{ detail.name }}
              </a-col>
              <a-col :span="12">
                手机号：{{ detail.phone }}
              </a-col>
            </a-row>
            <a-row class="row">
              <a-col :span="12">
                身份证号：{{ detail.bankCardNum }}
              </a-col>
              <a-col :span="12">
                银行卡号：{{ detail.bankCardNum }}
              </a-col>
            </a-row>
            <a-row class="row">
              <a-col :span="12">
                项目金额：￥{{ detail.salaryFee | formatMoney }}
              </a-col>
              <a-col :span="12">
                状态：<a-badge
                  :status="detail.status | status('checkStatus', 'status')"
                  :text="detail.status | status('checkStatus', 'text')"
                />
              </a-col>
            </a-row>
            <a-row class="row">
              <a-col :span="24">
                备注：{{ detail.remark }}
              </a-col>
            </a-row>
          </div>
          <p class="title">验收信息</p>
          <div>
            <a-row class="row">
              <a-col :span="24">
                交付说明：{{ detail.deliveryComment }}
              </a-col>
            </a-row>
            <a-row class="row">
              <a-col :span="24">
                交付附件：
                <template v-if="detail.deliveryAttachment">
                  <a
                    title="点击下载"
                    @click="downloadAttachment(detail.deliveryAttachment)">
                    <a-icon type="file" />
                  </a>
                </template>
                <span v-else>无</span>
              </a-col>
            </a-row>
          </div>
        </a-col>
        <a-col
          :span="8"
          class="bd"
        >
          <p class="title">项目记录</p>
          <a-steps
            direction="vertical"
            size="small"
            :current="detail.trace && (detail.trace.length - 1)"
            class="steps"
          >
            <a-step
              v-for="t in detail.trace"
              :key="t.id"
              :title="t.actionName"
              :data-code="t.id"
              :description="t.createdTime | moment"
            />
            <!-- <a-step title="发布了项目" data-code="10" description="2020-09-08 15:00:00" />
              <a-step title="申请了项目" data-code="20" description="2020-09-08 15:00:00" />
              <a-step title="通过了申请" data-code="30" description="2020-09-08 15:00:00" />
              <a-step title="拒绝了申请" data-code="31" description="2020-09-08 15:00:00" />
              <a-step title="申请验收" data-code="40" description="2020-09-08 15:00:00" />
              <a-step title="验收通过" data-code="50" description="2020-09-08 15:00:00" />
              <a-step title="验收不通过" data-code="51" description="2020-09-08 15:00:00" /> -->
          </a-steps>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import { downloadAttachment } from '@/utils/util'
export default {
  name: 'ApplicantModal',
  data () {
    return {
      visible: false
    }
  },
  props: {
    detail: {
      type: Object,
      default: () => {
        return {
          projectName: ''
        }
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    downloadAttachment,
    show () {
      this.visible = true
    }
  }
}
</script>

<style lang="less" scoped>
// .bd {
//   border: 1px solid #eaeaea;
//   border-radius: 10px;
//   padding: 10px;
// }
.title {
  font-size: 16px;
  font-weight: bold;
  line-height: 2;
  margin: 0;
}
.row {
  line-height: 2;
}
.steps {
  margin: 12px 0;
}
</style>
